<template>
	<view class="page">

		<!-- 用户相关 -->
		<view class="user">
			<!-- 用户企业信息 -->
			<view class="user-firm">
				<view class="firm-name">xxxxxxxxx企业</view>
				<view class="firm-tier">
					<image class="firm-tier-image" src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/1.jpg">
					</image>
				</view>
				<view>注册时间: xxxx-xx-xx xx:xx:xx</view>
			</view>
			<!-- 金额相关 -->
			<view class="user-fund">
				<view class="residual-amount">0.00<text class="text1">元</text></view>
				<view class="recharge-button">立即充值</view>
			</view>
		</view>
		<!-- 查询数据 -->
		<view class="inquire">

			<!-- 查询条件 -->
			<veiw class="query-condition">
				<view class="set-time">
					<view class="times" @click="() => { show = true; currentOptions = 'start' }
						">{{ startTime == '' ? '开始时间' : startTime }}</view>
					<view>-</view>
					<view class="times" @click="() => { show = true; currentOptions = 'end' }
						">{{ endTime == '' ? '结束时间' : endTime }}</view>
				</view>
				<view class="query-button">查询</view>
			</veiw>
			<!-- 数据 -->
			<view class="query-data">
				<scroll-view class="scroll">
					<view v-for="(item, index) in data">
						<view class="items">
							<view class="items-avatar">
								<image class="items-image" :src="item.avatar"></image>
							</view>
							<view class="datas">
								<view class="data-top">
									<view class="data-top-left">
										{{ item.name }}
										<text class="text2">{{ item.name2 }}

										</text>
									</view>
									<view class="data-top2-right">{{ item.name3 }}</view>
								</view>
								<view class="data-bottom">
									<view class="data-bottom-font">时间: {{ item.time }}</view>
									<view class="data-bottom-font">时间: {{ item.time2 }}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 时间选择器 -->
		<u-picker v-model="show" mode="time" :params="params" @confirm="pickerConfirm()"></u-picker>
	</view>

</template>

<script>
export default {
	data() {
		return {
			// 当前选择类型
			currentOptions: '',
			// 开始时间
			startTime: '',
			// 结束时间
			endTime: '',
			// 获取时间格式
			params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
			// 是否打开时间选择器
			show: false,
			// 数据
			data: [
				{
					avatar: 'https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/1.jpg',
					name: '人才',
					name2: '人才',
					name3: '人才',
					time: '2024-10-10',
					time2: '2024-10-11',
				}
			],
		}
	},
	methods: {
		/**
		 * 确认时间
		 */
		pickerConfirm(e) {
			console.log("选择时间:", e);
			// 校验当前选择类型,并对开始时间结束时间进行赋值
			if (this.currentOptions == 'start') {
				this.startTime = `${e.year}-${e.month}-${e.day}`
			} else if (this.currentOptions == 'end') {
				this.endTime = `${e.year}-${e.month}-${e.day}`
			}

		}
	}
}
</script>

<style lang="less" scoped>
.page {
	height: 100vh;
	width: 100%;
	padding: 0 20rpx;
	overflow: hidden;

	view {
		color: #000;
	}

	.user {
		margin-top: 2%;
		height: 26%;
		border-radius: 30rpx;
		// background: linear-gradient(to right,
		// 		#185bec 0%,
		// 		#47a7f5 18%,
		// 		#8bd8ff 45%,
		// 		#63ff5b 100%);
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		display: flex;
		padding: 80rpx 40rpx 40rpx;
		gap: 40rpx;

		.user-firm {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.firm-name {
				font-size: 35rpx;
				font-weight: 600;
			}

			.firm-tier {
				.firm-tier-image {
					height: 50rpx;
					width: 140rpx;
				}
			}
		}

		.user-fund {
			display: flex;
			flex-direction: column;
			align-items: center;

			.residual-amount {
				font-size: 64rpx;
				margin: 20rpx 0 30rpx;
				color: #F7C878;

				.text1 {
					color: #000;
					margin-left: 6rpx;
					font-size: 28rpx;
				}
			}

			.recharge-button {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #F8C329;
				height: 80rpx;
				width: 100px;
				font-size: 30rpx;
				border-radius: 40rpx;
			}
		}
	}

	.inquire {
		margin-top: 4%;
		height: 68%;
		display: flex;
		flex-direction: column;

		.query-condition {
			display: flex;
			height: 50px;

			.set-time {
				display: flex;
				justify-content: center;
				align-items: center;
				border-top-left-radius: 10rpx;
				border-bottom-left-radius: 10rpx;
				height: 75rpx;
				width: 75%;
				gap: 10px;
				background-color: #F5F5F5;

				.times {
					display: flex;
					justify-content: center;
					width: 46%;
				}
			}

			.query-button {
				display: flex;
				justify-content: center;
				align-items: center;
				border-top-right-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				width: 25%;
				height: 75rpx;
				background: #F8C329;
			}
		}

		.query-data {
			overflow: hidden;
			flex: 1;

			.scroll {
				height: 100%;
			}
		}
	}

	.items {
		margin-top: 20rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		border-radius: 10rpx;
		width: 100%;
		height: 160rpx;
		padding: 26rpx 25rpx;
		display: flex;
		align-items: center;

		.items-avatar {
			padding: 0 20rpx 0 0;

			.items-image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
			}
		}

		.datas {
			flex: 1;
			height: 100%;
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			.data-top {
				display: flex;
				justify-content: space-between;

				.data-top-left {
					font-size: 33rpx;

					.text2 {
						margin-left: 10rpx;
						font-size: 25rpx;
						color: #a3a3a3;
					}
				}

				.data-top2-right {
					font-size: 27rpx;
					color: #a3a3a3;
				}
			}

			.data-bottom {
				display: flex;
				justify-content: space-between;

				.data-bottom-font {
					font-size: 25rpx;
					color: #a3a3a3;
				}
			}
		}
	}
}
</style>